.topbar-wrapper{
    background-color: #333;
}

.topbar-content{
    margin: 0 auto;
    /* 这里可以使用line-height来代替height
       但是height和line-height是不一样的
    */
    line-height: 40px; 
    /* 其实最好还是要设置height,这样内部的子元素很大的话就会
    直接脱离父元素，不会把父元素撑高了   */
    height: 40px;
  
}
.topbar-content a:hover {
     color: #fff;
}

.topbar-content a{
    font-size: 12px;
    color: #b0b0b0;
    display: block;
}

.topbar-content ul.items{
    float: left;
}

.topbar-content ul.items li{
    float: left;
}

.shopping-cart,.user{
    float: right;
}

.nav-content .items ul.items-ul > li,.user li{
    float: left;
}

.line{
    width: 1px;
    /* 这里虽然子元素浮动了还是可以把父元素撑起来
      因为设置了取消浮动
    */
    height: 10px;
    color: #424242;
    margin: 15px 9px;
}

.shopping-cart{
    width: 120px;
    height: 40px;
    background-color: #424242;
    text-align: center;
    margin-left: 27px;
    position: relative;
}

.shopping-cart i{
    font-size: 12px;
}

.shopping-cart:hover a{
    display: block;
    background-color: #fff;
    color: #ff6700;
}

.cart-info{
    /* display: none; */
    width: 315px;
    /* height: 100px; */
    height: 0;
    overflow: hidden;
    background-color:#fff;
    position:absolute;
    left:-194px;
    box-shadow: 0 0 10px rgba(223, 217, 217, 0.5);
    z-index: 99;
}

.shopping-cart:hover .cart-info {
    /* display: block; */
    height: 100px;
    transition: height 0.3s;
}

.qrcode{
    /* display: none;
     */

    width: 124px;
    height: 148px;
     transition:  height 0.3s;
   
    /* 将高度设置为0,并搭配overflow: hidden;进行隐藏 */
     height: 0;
     overflow: hidden;
    /* 注意这里要把行高重新设置，因为父元素设置了行高
    行高会被继承下来，影响其他元素的布局 */
    line-height: 1;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(223, 217, 217, 0.5);
    text-align: center;
    position: absolute;
    top:41px;
    left:-36px;
    z-index: 999;
}

.qrcode img{
    width: 90px;
    margin: 17px;
    margin-bottom: 10px;
}

.qrcode span{
    font-size: 14px;
    color: black;
}

.app{
    position: relative;
}

/* 注意这里要用after 因为下载app文字在元素中，
这里要的效果是让伪元素出现在文字后面*/
.app::after{
    display: none;
    content: '';
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-top: none;
    border-bottom-color: #fff;
    position: absolute;
    left:10px;
    bottom: 0;

}

.app:hover .qrcode{
    /* 恢复高度并搭配动画 */
    height: 148px;
    transition: height 0.3s;
    /* 注意 transition后面跟着的属性名必须在大括号内声明*/
}

/* 注意这种写法也是可以的 */
.app:hover::after{
    display: block;
}



.nav-wrapper{
    width: 100%;
    position: relative;
    
}

.nav-content{
    height: 100px;
    margin: 20px auto;
    position: relative;
    
}

.logo{
     position: relative;
     width: 55px;
     height: 55px; 
     overflow: hidden;
     float: left;
    /* 隐藏logo中的文字 */
    /* text-indent: -9999px */

}

.logo-icon {
    background-image: url(../img/mi-logo.png);
    background-position: center;
    width: 55px;
    height: 55px;
    transition:  width 0.3s;
    background-color: #ff6700;
    position: absolute;
}

.logo-home {
    background-image: url(../img/mi-home.png);
    background-position: center;
    width: 55px;
    height: 55px;
    transition:  width 0.3s;
    background-color: #ff6700;
    position: absolute; 
    left:-55px;
}

.logo:hover .logo-icon{
     width: 0;
     transition: width 0.3s;
}

.logo:hover .logo-home{
    margin-left: 55px;
    transition: margin-left 0.3s;
} 

div.items ul{
    padding-left: 67px;
}

.items ul{
    float: left;
    height: 100px;
    line-height: 100px;
    margin-top: -20px;
}

.items ul li a{
    margin-right: 20px;
    font-size: 16px;
    color: #333;
    display: block;
}
.items ul li a:hover{
    color: #ff6700;
}

.all-goods{
    visibility: hidden;
}

.text-area{
    position: relative;
}

.select-area{
    /* 这里的100%相对的是包含块的宽度 */
    width: 100%;
    height: 0;
    transition: height 0.3s;
    background-color: #fff;
    position: absolute;
    top:72px;
    left: 0;
    z-index: 80;
}

.items ul li.active:hover ~ .select-area,.select-area:hover{
    height: 228px;
    box-shadow: 0 10px 10px rgba(223, 217, 217, 0.5);
    border-top: 1px solid rgba(223, 217, 217, 0.5);
}

.search-area{
    width: 296px;
    height: 49px;
    float: right;
    margin-top: 5px;
   
}

.search-area .text{
    float: left;
    height: 50px;
    width: 234px;
    padding: 0;
    /* 将文本框的框线去掉 */
    outline: none;
    border: 1px solid rgb(224, 224, 224);
     font-size: 16px;
    /* 让文字开始不是紧贴文本框 */
    padding-left: 10px;
  
    
}

.search-area .text:focus,
.search-area .text:focus ~.button
{
  border-color: #FF6700;

}

.search-area .text:focus ~ .search-result{
    display: block;
}

.search-area .button{
    font-size: 20px;
    font-weight:bold;
    float: left;
    width: 48px;
    height: 52px;
    padding: 0;
    background-color: #fff;
    border: 1px solid rgb(224, 224, 224);     
    border-left: none;                                                       
}

.search-area .button:hover{
    background-color: #ff6700;
    color: #fff;
    border-color: #FF6700;
}

.search-area .search-result{
    display: none;
    width: 245px;
    height: 200px;
    background-color: #fff;
    position:absolute;
    top:51px;
    left:0;
    border: 1px solid #ff6700;
    z-index:88;
}

.items  ul.category-list {
    float: left;
    padding: 0;
    width: 234px;
    height: 459px;
    background-color: rgba(0, 0, 0, .6);
    line-height: 1;
    position: absolute;
    left: 0;
    top: 98px;
    padding-top:20px;
    z-index: 66;
}

.items  .category-info {
    display: none;
    position: absolute;
    left: 234px;
    top:77px;
    width: 797px;
    height: 480px;
    background-color: #FFF;
    border: 1px solid rgba(233, 220, 220, 0.8);
    box-shadow: 0 0 10px  rgba(233, 220, 220, 0.8);
    z-index: 100;


}

.items  ul.category-list li a{
    /* display: block; */
    height: 44px;
    line-height: 44px;
    padding-left: 31px;
    font-size: 14px;
    color: #fff;
}

.items  ul.category-list li i{
    font-size: 1px;
    font-weight: bolder;
    float: right;
    color: #fff;
    margin-top: -30px;
    margin-right: 20px;
}

.items  ul.category-list li:hover{
    background-color: #FF6700;
}

.items  ul.category-list li:hover + div.category-info{
    display: block;
}

.banner{
    height: 479px;
    margin: 0 auto;
    position: relative;
}

/* 调整照片的大小就要准确的指向照片 设置照片外面的盒子的尺寸不行  因为图片会从盒子中溢出 */
.banner .image-list img{
    position: absolute;
    width: 100%;
    height: 100%;
    top:-42px;
}

.point {
    position: absolute;
    bottom: 67px;
    right: 58px;
}

.point a {
    float: left;
    width: 6px;
    height: 6px;
    border: 2px rgba(255, 255, 255, .4) solid;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, .4);
    margin-left: 6px;
}

.point a:hover{
    background-color:rgba(255, 255, 255, .4);
    border-color: rgba(0, 0, 0, .4);;

}

.arrow{
    width: 200px;
    height: 200px;
    background-color: #ff6700;
}

.arrow a{
  position: absolute;
  width: 200px;
  height: 200px;
  width: 42px;
  height: 69px;
  top:163px; 
}

.arrow .next-arrow{  
    background-image: url(../img/icon-slides.png);
    background-position: -123px 0;
    right: 0;
}

.arrow .prev-arrow{
    background-image: url(../img/icon-slides.png);
    background-position: -83px 0;
    right: 950px;  
}

.arrow .prev-arrow:hover{
    background-position: 0 0;

}

.arrow .next-arrow:hover{
    background-position: -41px 0;
}

.ad-wrapper{
    margin: 0 auto;
    margin-top: -23px;
}



.iconlist,.ad-list{
    float: left;
}

.ad-list li{
    float: left;
    margin-right: 17px;
}

.ad-list li:last-child{
    margin-right: 0;
}

.ad-list li img{
    width: 315px;
    height: 170px;
}


.iconlist {
    width: 233px;
    height: 170px;
    background-color: #5f5750;
    margin-right: 14px;
}

/* 这里我没没有给li设置高宽而是直接给li内部的a转换为
块级元素后设置高宽借此将li撑起

尝试一下给li设置宽高和行高 然后a转化为块元素，继承宽高
*/
.iconlist  a{
    float: left;
    display: block;
    width: 76px;
    /* 可让超链接内部的文字图标和文字居中 */
    text-align: center;
    height: 84px;
    color: #cfccca;

}

.iconlist li i{
    /* 将文字图标也转换为块级元素可以让图标和文字换行 */
    display: block;
    margin-top: 20px;
    font-size: 20px;

}







 































































































































































































































    
    
}




